<template>
  <div class="m_container">
    <!-- 博客内容 -->
    <div class="m_content">
      <el-form
        ref="editForm"
        status-icon
        :model="editForm"
        :rules="rules1"
        label-width="80px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <mavon-editor
            :toolbars="toolbars"
            v-model="editForm.content"
            :ishljs="true"
          />
        </el-form-item>
        <el-form-item style="margin: auto">
          <el-button type="info" @click="temporarySave()">暂时保存</el-button>
          <el-button type="primary" @click="tosubmitForm('editForm')"
            >发布文章</el-button
          >
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <!-- 对话框内容 -->
    <el-dialog title="发布文章" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="editForm" ref="editForm2">
        <el-form-item label="文章标签" :label-width="formLabelWidth">
          <!-- <el-input v-model="oldtags" placeholder="请选择标签，多个标签请用逗号隔开" width="80%"></el-input> -->
          <el-tag
            :key="tag"
            v-for="tag in editForm.tags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            style="margin-left: 10px"
            size="small"
            @click="showInput"
            >+ New Tag</el-button
          >
        </el-form-item>
        <el-form-item
          label="首页图片"
          prop="firstPicture"
          :label-width="formLabelWidth"
        >
          <Upload
            :firstPicture="editForm.firstPicture"
            @change="imgChange"
          ></Upload>
          <!-- <el-input v-model="editForm.first_picture"></el-input> -->
        </el-form-item>
        <el-form-item
          label="分类专栏"
          prop="categoryId"
          :label-width="formLabelWidth"
          :rules="{
            required: true,
            message: '文章分类不能为空',
            trigger: 'blur',
          }"
        >
          <el-select v-model="editForm.categoryId" placeholder="请选择分类专栏">
            <el-option
              v-for="item in getalltype"
              :key="item.index"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
          <el-button
            type="primary"
            size="small"
            @click="dialog2 = true"
            style="margin-left: 10px"
            >新建分类专栏</el-button
          >
        </el-form-item>
        <el-form-item
          label="文章类型"
          prop="flag"
          :label-width="formLabelWidth"
          :rules="{
            required: true,
            message: '文章类型不能为空',
            trigger: 'blur',
          }"
        >
          <el-select
            v-model="editForm.flag"
            placeholder="请选择文章类型，默认为原创"
          >
            <el-option label="原创" value="原创"></el-option>
            <el-option label="转载" value="转载"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="发布形式"
          prop="published"
          :label-width="formLabelWidth"
          :rules="{
            required: true,
            message: '发布形式不能为空',
            trigger: 'blur',
          }"
        >
          <el-select
            v-model="editForm.published"
            placeholder="请选择发布形式，，默认为私密"
          >
            <el-option label="私密" value="0"></el-option>
            <el-option label="公开" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBlog('editForm2')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 新建分类专栏 -->
    <el-dialog title="新建分类专栏" :visible.sync="dialog2" width="30%">
      <el-form
        status-icon
        :model="type"
        ref="type"
        :rules="rules2"
        label-width="120px"
      >
        <el-form-item label="分类专栏名" prop="name">
          <el-input
            v-model="type.name"
            placeholder="请输入要新建的分类专栏名"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog2 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('type')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "./components/Upload.vue";
export default {
  name: "WriteBlog",
  data() {
    return {
      editForm: {
        //博客文章表单
        id: null,
        title: "",
        description: "",
        firstPicture: "",
        content: "",
        published: null,
        tags: [],
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },

      editForm2: {
        //用来校验的表单
        type_id: null,
        flag: "",
        published: null,
      },
      oldtags: "", //字符串类型的标签
      type: {
        //分类专栏
        name: "",
      },
      getalltype: [], // 所有分类专栏
      dialogFormVisible: false, //控制发布博客对话框
      dialog2: false, //控制新增分类专栏对话框
      rules1: {
        //表单校验
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度在 3 到 100 个字符",
            trigger: "blur",
          },
        ],
        description: [
          { required: true, message: "请输入摘要", trigger: "blur" },
        ],
        firstPicture: [
          { required: true, message: "请输入图片地址", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      rules2: {
        //表单校验
        name: [
          { required: true, message: "分类专栏名不能为空", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px", // 输入框的宽度
      inputVisible: false,
      inputValue: "",
    };
  },
  components: {
    Upload,
  },
  created() {},
  methods: {
    handleClose(tag) {
      this.editForm.tags.splice(this.editForm.tags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.editForm.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //去发布文章
    toSubmit() {
      this.dialogFormVisible = true;
      this.initType();
    },
    //初始化文章专栏
    initType() {
      const _this = this;
      this.getRequest("/api/category/admin/list").then((resp) => {
        console.log(resp);
        _this.getalltype = resp.data;
      });
    },
    //校验添加分类专栏表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addNewType();
        } else {
          return false;
        }
      });
    },
    //校验博客基本内容表单
    tosubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.toSubmit();
        } else {
          return false;
        }
      });
    },
    //校验发布博客表单,校验成功后发布博客
    submitBlog(formName) {
      const _this = this;
      this.editForm.shareStatement = 1;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //发布博客
          this.postRequest(
            "/api/article/admin/saveOrUpdate",
            this.editForm
          ).then((resp) => {
            if (resp) {
              _this.dialogFormVisible = false;
              alert("发布成功，点击确定跳转到博客列表页面!");
              _this.$router.push("/blog/allblogs");
            }
          });
        } else {
          return false;
        }
      });
    },
    //暂时保存博客
    temporarySave() {
      const _this = this;
      this.editForm.shareStatement = 0;
      this.postRequest("/api/article/admin/saveOrUpdate", this.editForm).then(
        (resp) => {
          if (resp) {
            this.$message("已成功保存草稿成功");
          }
        }
      );
    },
    imgChange(url) {
      this.editForm.firstPicture = url;
    },
  },
};
</script>

<style>
.m_container {
  margin-top: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>


